<template>
  <custom-modal
    v-if="visible"
    :width="width"
    :visible="visible"
    :title="$t('releaseNote')"
    :destroyOnClose="true"
    class="releaseNoteLanguageComp"
    @cancel="handleCancel"
    modalCls=".releaseNoteLanguageComp"
    :bodyStyle="{ height: '500px', overflowY: 'auto' }">
    <template slot="footer">
      <a-button type="primary" @click.stop="handleCancel">{{ $t('back') }}</a-button>
    </template>
    <a-form-model
      class="AsteriskAfter newEditStyle editVehicleVersion"
    >
      <div>
        <!-- 版本描述 -->
      <a-form-model-item
        :label="$t('versionDescription')"
        v-if="releaseNotes&&releaseNotes.description"
      >
        <a-textarea
          :rows="5"
          :value="releaseNotes.description"
          read-only
          class="textarea_style"
        />
        <!-- <a-row class="rowBox">
          <a-col :xs="24">{{ releaseNotes.functionAddition }}</a-col>
        </a-row> -->
      </a-form-model-item>
<!--      <a-row-->
<!--        style="margin-bottom:15px"-->
<!--        v-if="releaseNotes.functionDi6Info"-->
<!--      >-->
<!--        <a-col :md="24" :sm="24" class="btn-tab">-->
<!--          <a-button-->
<!--            :class="{active:activeDiTab==='DI6'}"-->
<!--            @click="activeDiTab='DI6';"-->
<!--          >DI6</a-button>-->
<!--          <a-button-->
<!--            :class="{active:activeDiTab==='DI5'}"-->
<!--            @click="activeDiTab='DI5'"-->
<!--            style="margin-left: 30px"-->
<!--          >DI5</a-button>-->
<!--        </a-col>-->
<!--      </a-row>-->
        <div>
          <!-- 功能新增 -->
          <a-form-model-item
            :label="$t('funcAdd')"
          >
            <a-textarea
              :rows="5"
              :value="releaseNotes.functionAddition"
              read-only
              class="textarea_style"
            />
            <!-- <a-row class="rowBox">
              <a-col :xs="24">{{ releaseNotes.functionAddition }}</a-col>
            </a-row> -->
          </a-form-model-item>
          <!-- 功能优化 -->
          <a-form-model-item
            :label="$t('funcOptimize')"
          >
            <a-textarea
              :rows="5"
              :value="releaseNotes.functionOptimization"
              read-only
              class="textarea_style"
            />
            <!-- <a-row class="rowBox">
              <a-col :xs="24">{{ releaseNotes.functionOptimization }}</a-col>
            </a-row> -->
          </a-form-model-item>
        </div>
        <!-- 特别鸣谢 -->
        <a-form-model-item
          :label="$t('specialThanks')"
        >
          <a-textarea
            :rows="5"
            :value="releaseNotes.acknowledgements"
            read-only
            class="textarea_style"
          />
          <!-- <a-row class="rowBox">
            <a-col :xs="24">{{ releaseNotes.acknowledgements }}</a-col>
          </a-row> -->
        </a-form-model-item>
      <div v-if="releaseNotes.functionDi6Info">
<!--        <a-form-model-item-->
<!--          :label="$t('systemUpgradeNotice')"-->
<!--        >-->
<!--        <a-textarea-->
<!--          class="textarea_style"-->
<!--          :rows="2"-->
<!--          :value="releaseNotes.functionDi6Info.functionOne"-->
<!--          read-only-->
<!--        />-->
<!--          &lt;!&ndash; <a-row class="rowBox">-->
<!--            <a-col :xs="24">{{ releaseNotes.functionDi6Info.functionOne }}</a-col>-->
<!--            <a-divider/>-->
<!--            <a-col :xs="24">{{ releaseNotes.functionDi6Info.functionTwo }}</a-col>-->
<!--          </a-row> &ndash;&gt;-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item>-->
<!--          <a-textarea-->
<!--            class="textarea_style"-->
<!--            :rows="2"-->
<!--            :value="releaseNotes.functionDi6Info.functionTwo"-->
<!--            read-only-->
<!--          />-->
<!--        </a-form-model-item>-->
        <a-form-model-item
          :label="$t('versionNoDeclaration')"
        >
        
          <div v-for="(functionDi6Info, index) in releaseNotes.functionDi6Info.functionDi6Infos" :key="index">
            <a-input :maxLength="23"
              v-model="functionDi6Info.functionTitle"
              style="width: 100%; margin-right: 8px;margin-bottom:15px"
              read-only
            />
            <a-form-model-item>
              <a-textarea
                :rows="2"
                :value="functionDi6Info.functionMsg"
                read-only
                class="textarea_style"
              />
            </a-form-model-item>
          </div>
          <!-- <a-row class="rowBox">
            <template v-for="(functionDi6Info, index) in releaseNotes.functionDi6Info.functionDi6Infos">
              <a-col :xs="24">{{ functionDi6Info.functionTitle }}</a-col>
              <a-col :xs="24">{{ functionDi6Info.functionMsg }}</a-col>
              <a-divider v-if="index < releaseNotes.functionDi6Info.functionDi6Infos.length - 1"/>
            </template>
          </a-row> -->
        </a-form-model-item>
      </div>
    </div>
    </a-form-model>
    
  </custom-modal>
</template>
<script>
import CustomModal from '@/components/CustomModal/index.vue'
import CustomTextArea from '@/components/CustomTextArea/index.vue'
export default {
  name: 'ViewReleaseNote',
  components: {
    CustomModal,
    CustomTextArea
  },
  props: {
    width: {
      type: Number,
      default: 800
    },
    releaseNotes: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      visible: false,
      activeDiTab:'DI5'
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {

        }
      },
      immediate: true
    }
  },
  mounted () {
  },
  methods: {
    handleCancel () {
      this.resetData()
      this.visible = false
    },
    resetData () {
    },
    toggleVisible (val) {
      this.visible = val
    }
  }
}
</script>
<style  lang="less">
.releaseNoteLanguageComp {
  .rowBox {
    border: 1px solid @borderColor;
    padding: 10px 15px;
    line-height: 2em;
    border-radius: 4px;
    text-align: justify;
    white-space: pre-wrap!important;
  }
  .ant-form-explain {
      font-size: 1.2rem;
      min-height: 1.6rem;
      display: none;
    }
  .btn-tab {
    .ant-btn.active {
      background-color: #4da6cd;
      color: white;
    }
    .ant-btn.error {
      border-color: red;
    }
  }
  .textarea_style{
    width: 100%; 
    margin-right: 8px;
    overflow: auto;
    resize:none;
    padding-bottom: 30px
  }
}
</style>
